<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="记一次电话面试"><meta name="keywords" content="面试"><meta name="author" content="晟松"><meta name="copyright" content="晟松"><title>记一次电话面试 | 晟松</title><link rel="shortcut icon" href="/logo.png"><link rel="stylesheet" href="/css/index.css?version=1.9.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.9.0"><meta name="format-detection" content="telephone=no"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="dns-prefetch" href="https://hm.baidu.com"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c34d81d53341febe06a155941e2df16d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  hexoVersion: '5.4.0'
} </script><meta name="generator" content="Hexo 5.4.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar" data-display="true"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%AE%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%E5%90%A7"><span class="toc-number">1.</span> <span class="toc-text">记一下问题吧</span></a></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">晟松</div><div class="author-info__description text-center">晟松的博客</div><div class="follow-button"><a target="_blank" rel="noopener" href="https://gitee.com/cheng_song">Gitee</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">52</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">45</span></a></div></div></div><div id="content-outer"><div id="top-container" style="background-image: url(/img/blog-bg.jpg)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">晟松</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus">   <a class="site-page" href="/">Home</a><a class="site-page" href="/archives">Archives</a><a class="site-page" href="/tags">Tags</a><a class="site-page" href="/categories">Categories</a></span><span class="pull-right"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> 搜索</span></a></span></div><div id="post-info"><div id="post-title">记一次电话面试</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-04-12</time><div class="post-meta-wordcount"><span>字数总计: </span><span class="word-count">1.3k</span><span class="post-meta__separator">|</span><span>阅读时长: 4 分钟</span></div></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><p>主要是一次没有准备的面试，突然就打了一个电话，然后就开始了一个10几分钟的电话面试，感觉面试得很不好，很多东西都没有答上来，有些东西也没有了解到，所以最后感觉就没了</p>
<h5 id="记一下问题吧"><a href="#记一下问题吧" class="headerlink" title="记一下问题吧"></a>记一下问题吧</h5><ul>
<li><p>自我介绍：</p>
<p>我感觉先写一个自我介绍，以后面试接直接用这个了</p>
<figure class="highlight tex"><table><tr><td class="code"><pre><span class="line">你好，我叫蒋晟松，是一个湖南师范大学18级软件工程大三的学生，现在20岁。目前寻找的是一个前端实习的岗位。在项目方面主要获得了一个大创省3等奖和目前的一个挑战杯省三。在学习成绩方面，在我们班大致是在中等偏上这个位置，在技术方面，主要是学习关于vue及其配套的资源库和技术。个人爱好方面就是游戏和爬山吧。最后在性格方面的话，我个人性格比较内向或沉稳，善于接收新知识，和适应新环境</span><br></pre></td></tr></table></figure></li>
<li><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/sinat_36422236/article/details/88763187">BFC是啥东西</a>：BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。</p>
<ul>
<li>特殊表现就是：Box垂直方向的距离由margin决定。属于<strong>同一个</strong>BFC的两个相邻Box的margin会发生重叠（取大的那一个）</li>
<li>还有一些规则来创建一个BFC</li>
</ul>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.imooc.com/article/68238">盒子模型</a>又是如何：谷歌标准盒子和ie盒模型 </p>
<ul>
<li>主要是如果给定了一个盒子的宽高，那这个盒子的padding和border是否包括在这个宽高之内，标准盒子没包括在内，padding和border是单独算在外面的，但ie盒子是一起计算在内的</li>
<li>box-sizing: content-box / border-box</li>
</ul>
</li>
<li><p>清除浮动</p>
</li>
<li><p>flex布局还有一些使用的细节</p>
</li>
<li><p>三角形如何画:通过清除盒子的高度和宽度，设置三个方向的border的高度，并隐藏两个方向的border得到一个三角形，三角形的方向由哪一边隐藏得到</p>
<p>向上的三角形，rgba(0, 0, 0, 0)和transparent用来隐藏这个border</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;triangle-up&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css"><span class="selector-id">#triangle-up</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">border-left</span>: <span class="number">50px</span> solid <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span></span><br><span class="line"><span class="css">    <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span></span><br><span class="line"><span class="css">    <span class="attribute">border-bottom</span>: <span class="number">100px</span> solid red;</span></span><br><span class="line"><span class="css">&#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>垂直水平居中的几种方式</p>
</li>
<li><p>发布者模式和订阅模式：一个一对多的依赖的解决方案，解决了这个一变了后，发布一个通知。通知所有依赖的多进行更新</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://codepen.io/nachao/pen/WNeKxBx">vue双向绑定的原理</a>：发布者和订阅者模式：处理数据更新后更新视图。compile编译时进行监听：处理视图更新后更新数据</p>
<ul>
<li><p>就是在编译时，匹配这些指令（主要是 v-model 和 v-text），并创建一个数据订阅。在js里面对需要绑定的数据进行一个数据劫持，劫持其set，当触发set时就通知其他订阅者更新。并将数据的每个属性添加到观察者的消息队列中</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 数据</span></span><br><span class="line"><span class="keyword">const</span> myData = ProxyWatcher(&#123; <span class="attr">value</span>: <span class="string">&quot;hello world.&quot;</span> &#125;, messageQueue);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将每个数据属性都添加到观察者的消息队列中</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> myData) &#123;</span><br><span class="line">    messageQueue[key] = <span class="keyword">new</span> Subject();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>v-text 可以得到数据更新通知后更新数据</p>
</li>
<li><p>v-model可以监听（addEventListener）用户的数据输入，触发数据的set，通知其他依赖进行更新</p>
</li>
</ul>
</li>
<li><p>项目的一些特点</p>
</li>
<li><p>commonjs模块和es6模块的区别</p>
<ul>
<li>前者可动态导入且是同步导入的。后者是异步的。</li>
<li>前者导出是值拷贝，后者是实时绑定，指向同一个内存地址</li>
</ul>
</li>
<li><p>koa实现一个接口的过程</p>
</li>
<li><p>settimeout和promise的区别</p>
</li>
<li><p>数组的常用方法，比如map，filter，find，，slice（答成splice了，也没答好，都混了。。。）等</p>
</li>
<li><p>手写 promise.all</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.all = <span class="function"><span class="keyword">function</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(arr)) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;参数必须是数组&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> list = []</span><br><span class="line">    arr.forEach(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.resolve(item).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">        list.push(value)</span><br><span class="line">        <span class="keyword">if</span>(list.length === arr.length) &#123;</span><br><span class="line">          resolve(list)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;, <span class="function">(<span class="params">err</span>)=&gt;</span> &#123;</span><br><span class="line">        reject(err)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>浏览器的缓存</p>
<ul>
<li>强缓存：主要是http请求头的cache-controller，不会发送http请求</li>
<li>协商缓存：后端进行处理后，进行返回，告诉浏览器从缓存中得到数据。主要是请求头的last-Modify和If-Modified-Since ，会有一个http请求</li>
</ul>
</li>
<li><p>AST（抽象语法树）</p>
<ul>
<li>在vue里面主要表现就是在模板编译的环节将template里面的html代码解析成ast，然后生成render树，然后进行diff比较和patch，最后渲染视图</li>
<li>在js里面主要表现就是使用词法分析，语法分析，解析js代码。常见的用处就是将es6的代码转换为ast后再加以操作变为es5的代码</li>
</ul>
</li>
</ul>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">晟松</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://chengsong.info/2021/04/12/记一次电话面试/">https://chengsong.info/2021/04/12/记一次电话面试/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://chengsong.info">晟松</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E9%9D%A2%E8%AF%95/">面试</a></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2021/04/22/%E8%AE%B0%E4%B8%80%E4%B8%8B%E7%AC%AC%E4%BA%8C%E6%AC%A1%E9%9D%A2%E8%AF%95/"><i class="fa fa-chevron-left">  </i><span>记一下第二次面试</span></a></div><div class="next-post pull-right"><a href="/2021/03/08/typescript-vue3%E7%AE%80%E5%8D%95%E5%AD%A6%E4%B9%A0/"><span>typescript+vue3简单学习</span><i class="fa fa-chevron-right"></i></a></div></nav></div></div><footer class="footer-bg" style="background-image: url(/img/blog-bg.jpg)"><div class="layout" id="footer"><div class="copyright">&copy;2020 - 2023 By 晟松</div><div class="framework-info"><span>驱动 - </span><a target="_blank" rel="noopener" href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="icp"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><span>湘ICP备2020021729号</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv"><i class="fa fa-file"></i><span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.9.0"></script><script src="/js/fancybox.js?version=1.9.0"></script><script src="/js/sidebar.js?version=1.9.0"></script><script src="/js/copy.js?version=1.9.0"></script><script src="/js/fireworks.js?version=1.9.0"></script><script src="/js/transition.js?version=1.9.0"></script><script src="/js/scroll.js?version=1.9.0"></script><script src="/js/head.js?version=1.9.0"></script><script src="/js/search/local-search.js"></script><script>if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
  $('#top-container').addClass('is-mobile')
}</script><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"></div></div></div><hr><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>